<template>
  <div class="city-group">
    <van-index-bar :index-list="indexList">
      <!-- 热门城市 -->
      <van-index-anchor index="热门城市" />
      <div class="list">
        <template
          v-for="(hotCity, index) in currentGroup.hotCities"
          :key="index"
        >
          <div class="list-city" @click="cityClick(hotCity)">
            {{ hotCity.cityName }}
          </div>
        </template>
      </div>

      <!-- 城市列表 -->
      <template v-for="group in currentGroup?.cities" :key="group">
        <van-index-anchor :index="group.group" />
        <template v-for="(city, inden) in group.cities" :key="inden">
          <van-cell :title="city.cityName" @click="cityClick(city)" />
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<script setup>
import { computed } from "@vue/runtime-core";
import useCityStore from "@/stores/modules/city.js";
import { useRouter } from "vue-router";
// 1.定义props数据
const prop = defineProps({
  currentGroup: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

// 2.获取动态索引
const indexList = computed(() => {
  const list = prop.currentGroup.cities.map((item) => {
    return item.group;
  });
  list.unshift("#");
  return list;
});

// 3.监听城市的点击
const router = useRouter();
const cityStore = useCityStore();
const cityClick = (city) => {
  // 3.1 处理city对象将它传递给city.vue组件，所以需要用到pinia,当然也可以使用事件总线(EventBus),但是这里还是使用pinia
  cityStore.currentCity = city;
  // 3.2 返回home.vue组件
  router.back();
};
</script>

<style lang="less" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  line-height: 28px;
  text-align: center;
  padding: 10px;
  padding-right: 25px;
  .list-city {
    width: 70px;
    height: 28px;
    border-radius: 14px;
    background-color: #fff4ec;
    margin: 10px 0;
  }
}
</style>
